

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/dzx-blog/img/fluid.png">
  <link rel="icon" href="/dzx-blog/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
    <meta name="description" content="1.利用canvas截取图片(也可用于头像截取后上传)大概实现原理​	利用一个遮罩层确定需要截取的图片大小,通过canvas的api canvas.drawImage()截取图片. 关键点: 如何选择想要的图片展示在对应的位置  使用input&lt;type&#x3D;file&gt;选择图片,通过 new FileReader() 来读取图片  &#x2F;&#x2F;给input绑定的change回调事件 co">
<meta property="og:type" content="article">
<meta property="og:title" content="开发记录">
<meta property="og:url" content="https://deng-zixiong.gitee.io/dzx-blog/2021/10/01/%E5%BC%80%E5%8F%91%E8%AE%B0%E5%BD%95/index.html">
<meta property="og:site_name" content="猛男邓子雄的博客">
<meta property="og:description" content="1.利用canvas截取图片(也可用于头像截取后上传)大概实现原理​	利用一个遮罩层确定需要截取的图片大小,通过canvas的api canvas.drawImage()截取图片. 关键点: 如何选择想要的图片展示在对应的位置  使用input&lt;type&#x3D;file&gt;选择图片,通过 new FileReader() 来读取图片  &#x2F;&#x2F;给input绑定的change回调事件 co">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-09-30T16:00:00.000Z">
<meta property="article:modified_time" content="2023-07-11T12:22:57.179Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary_large_image">
  
  
  
  <title>开发记录 - 猛男邓子雄的博客</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/dzx-blog/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/dzx-blog/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/dzx-blog/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"deng-zixiong.gitee.io","root":"/dzx-blog/","version":"1.9.4","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/dzx-blog/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/dzx-blog/js/utils.js" ></script>
  <script  src="/dzx-blog/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/dzx-blog/">
      <strong>邓子雄的博客</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/dzx-blog/">
                <i class="iconfont icon-home-fill"></i>
                <span>首页</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/dzx-blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                <span>归档</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/dzx-blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                <span>分类</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/dzx-blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                <span>标签</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/dzx-blog/about/">
                <i class="iconfont icon-user-fill"></i>
                <span>关于</span>
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              <i class="iconfont icon-search"></i>
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/dzx-blog/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="开发记录"></span>
          
        </div>

        
          
  <div class="mt-3">
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2021-10-01 00:00" pubdate>
          2021年10月1日 凌晨
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          33k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          276 分钟
        
      </span>
    

    
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">开发记录</h1>
            
            
              <div class="markdown-body">
                
                <h1 id="1-利用canvas截取图片-也可用于头像截取后上传"><a href="#1-利用canvas截取图片-也可用于头像截取后上传" class="headerlink" title="1.利用canvas截取图片(也可用于头像截取后上传)"></a>1.利用canvas截取图片(也可用于头像截取后上传)</h1><h2 id="大概实现原理"><a href="#大概实现原理" class="headerlink" title="大概实现原理"></a>大概实现原理</h2><p>​	利用一个遮罩层确定需要截取的图片大小,通过canvas的api <code>canvas.drawImage()</code>截取图片.</p>
<h2 id="关键点"><a href="#关键点" class="headerlink" title="关键点:"></a>关键点:</h2><ul>
<li><p>如何选择想要的图片展示在对应的位置</p>
<ul>
<li><p>使用input&lt;type&#x3D;file&gt;选择图片,通过 <code>new FileReader()</code> 来读取图片</p>
</li>
<li><pre><code class="javascript">//给input绑定的change回调事件
const readImg = (e) =&gt; &#123;
//获取的图片二进制文件
let file = e.target.files[0];
let reader = new FileReader();
//读取对象,完成后触发loadend事件,同时result属性将会有url格式的字符串
reader.readAsDataURL(file);

document.getElementById(&quot;wrapper&quot;).style.display = &quot;&quot;;

reader.onload = () =&gt; &#123;
    //img获取的图片dom
    img.src = reader.result  //展示图片
&#125;
<figure class="highlight angelscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs angelscript"><br>- 生成一个容器 可以拉伸 用来选定截取的范围,可以用 `getBoundingClientRect` 来获取各种dom位置信息.  <br><br>  - 鼠标在mask拉伸容器里移动得区分是移动mask整体 还是拉伸.<br><br>  - 记录点击位置 分辨拉伸六个点时是缩小还是放大<br>  <br>  - 模板<br>  <br>    ```javascript<br>    &lt;div id=<span class="hljs-string">&quot;mask&quot;</span> <span class="hljs-keyword">class</span>=&quot;<span class="hljs-symbol">mask</span>&quot; @<span class="hljs-symbol">mousedown</span>=&quot;<span class="hljs-symbol">maskDown</span>&quot;&gt;<br>        //生成六个点 用于拉伸容器 选择截取的范围<br>        &lt;<span class="hljs-symbol">div</span> <span class="hljs-symbol">id</span>=&quot;<span class="hljs-symbol">coor_tl</span>&quot; <span class="hljs-symbol">class</span>=&quot;<span class="hljs-symbol">coor_tl</span>&quot; @<span class="hljs-symbol">mousedown</span>=&quot;<span class="hljs-symbol">coormousedown_tl</span>&quot;&gt;&lt;/<span class="hljs-symbol">div</span>&gt;<br>        &lt;<span class="hljs-symbol">div</span> <span class="hljs-symbol">id</span>=&quot;<span class="hljs-symbol">coor_tm</span>&quot; <span class="hljs-symbol">class</span>=&quot;<span class="hljs-symbol">coor_tm</span>&quot; @<span class="hljs-symbol">mousedown</span>=&quot;<span class="hljs-symbol">coormousedown_tm</span>&quot;&gt;&lt;/<span class="hljs-symbol">div</span>&gt;<br>        &lt;<span class="hljs-symbol">div</span> <span class="hljs-symbol">id</span>=&quot;<span class="hljs-symbol">coor_tr</span>&quot; <span class="hljs-symbol">class</span>=&quot;<span class="hljs-symbol">coor_tr</span>&quot; @<span class="hljs-symbol">mousedown</span>=&quot;<span class="hljs-symbol">coormousedown_tr</span>&quot;&gt;&lt;/<span class="hljs-symbol">div</span>&gt;<br>    <br>        &lt;<span class="hljs-symbol">div</span> <span class="hljs-symbol">id</span>=&quot;<span class="hljs-symbol">coor_ml</span>&quot; <span class="hljs-symbol">class</span>=&quot;<span class="hljs-symbol">coor_ml</span>&quot; @<span class="hljs-symbol">mousedown</span>=&quot;<span class="hljs-symbol">coormousedown_ml</span>&quot;&gt;&lt;/<span class="hljs-symbol">div</span>&gt;<br>        &lt;<span class="hljs-symbol">div</span> <span class="hljs-symbol">id</span>=&quot;<span class="hljs-symbol">coor_mr</span>&quot; <span class="hljs-symbol">class</span>=&quot;<span class="hljs-symbol">coor_mr</span>&quot; @<span class="hljs-symbol">mousedown</span>=&quot;<span class="hljs-symbol">coormousedown_mr</span>&quot;&gt;&lt;/<span class="hljs-symbol">div</span>&gt;<br>    <br>        &lt;<span class="hljs-symbol">div</span> <span class="hljs-symbol">id</span>=&quot;<span class="hljs-symbol">coor_bl</span>&quot; <span class="hljs-symbol">class</span>=&quot;<span class="hljs-symbol">coor_bl</span>&quot; @<span class="hljs-symbol">mousedown</span>=&quot;<span class="hljs-symbol">coormousedown_bl</span>&quot;&gt;&lt;/<span class="hljs-symbol">div</span>&gt;<br>        &lt;<span class="hljs-symbol">div</span> <span class="hljs-symbol">id</span>=&quot;<span class="hljs-symbol">coor_bm</span>&quot; <span class="hljs-symbol">class</span>=&quot;<span class="hljs-symbol">coor_bm</span>&quot; @<span class="hljs-symbol">mousedown</span>=&quot;<span class="hljs-symbol">coormousedown_bm</span>&quot;&gt;&lt;/<span class="hljs-symbol">div</span>&gt;<br>        &lt;<span class="hljs-symbol">div</span> <span class="hljs-symbol">id</span>=&quot;<span class="hljs-symbol">coor_br</span>&quot; <span class="hljs-symbol">class</span>=&quot;<span class="hljs-symbol">coor_br</span>&quot; @<span class="hljs-symbol">mousedown</span>=&quot;<span class="hljs-symbol">coormousedown_br</span>&quot;&gt;&lt;/<span class="hljs-symbol">div</span>&gt;<br>    &lt;/<span class="hljs-symbol">div</span>&gt;<br></code></pre></td></tr></table></figure>
</code></pre>
</li>
<li><p>js逻辑部分</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 当前操作的类型,标记当前要拖动的区域 分辨mask容器上下左右移动的方向 边界判断</span><br><span class="hljs-keyword">const</span> operateType = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);<br><br><span class="hljs-comment">//用以计算鼠标按住mask容器移动时的位置 以及拉扯mask 造成mask尺寸变化的计算</span><br><span class="hljs-comment">//记录点击时的x位置</span><br><span class="hljs-keyword">const</span> clickX = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><span class="hljs-comment">//记录点击时的y位置</span><br><span class="hljs-keyword">const</span> clickY = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span><br>                   <br><span class="hljs-comment">//从event中得到位置</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">getLocation</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-keyword">return</span> &#123;<br>    <span class="hljs-attr">x</span>: e.<span class="hljs-property">x</span> || e.<span class="hljs-property">clientX</span>,<br>    <span class="hljs-attr">y</span>: e.<span class="hljs-property">y</span> || e.<span class="hljs-property">clientY</span>,<br>  &#125;;<br>&#125;;<br><br><span class="hljs-comment">//容器的位置x</span><br><span class="hljs-keyword">const</span> wrapper_x = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><span class="hljs-comment">//容器的位置y</span><br><span class="hljs-keyword">const</span> wrapper_y = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><span class="hljs-comment">//容器的宽度</span><br><span class="hljs-keyword">const</span> wrapper_w = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><span class="hljs-comment">//容器的高度</span><br><span class="hljs-keyword">const</span> wrapper_h = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><br><span class="hljs-comment">//鼠标在coor上面按下时的处理函数</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onDragDown</span> = (<span class="hljs-params">e, type</span>) =&gt; &#123;<br>  e.<span class="hljs-title function_">stopPropagation</span>();<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;begin onDragDown&quot;</span>);<br><br>  origin_w.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">width</span>;<br>  origin_h.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span>;<br><br>  origin_x.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">left</span>;<br>  origin_y.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">top</span>;<br><br>  wrapper_x.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">left</span>;<br>  wrapper_y.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">top</span>;<br><br>  wrapper_w.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">width</span>;<br>  wrapper_h.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span>;<br><br>  <span class="hljs-keyword">var</span> location = <span class="hljs-title function_">getLocation</span>(e);<br>  clickY.<span class="hljs-property">value</span> = location.<span class="hljs-property">y</span>;<br>  clickX.<span class="hljs-property">value</span> = location.<span class="hljs-property">x</span>;<br>  operateType.<span class="hljs-property">value</span> = type;<br>  <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>&#125;;<br><br><span class="hljs-comment">//鼠标松开时的事件</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onDragUp</span> = (<span class="hljs-params"></span>) =&gt; &#123;<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">style</span>.<span class="hljs-property">cursor</span> = <span class="hljs-string">&quot;auto&quot;</span>;<br>  operateType.<span class="hljs-property">value</span> = <span class="hljs-literal">null</span>;<br>&#125;;<br><span class="hljs-comment">//coor鼠标按下:底部左侧</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_bl</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;bl&quot;</span>);<br>&#125;;<br><span class="hljs-comment">//coor鼠标按下:底部中间</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_bm</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;b&quot;</span>);<br>&#125;;<br><span class="hljs-comment">//coor鼠标按下:底部右侧</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_br</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;br&quot;</span>);<br>&#125;;<br><span class="hljs-comment">//coor鼠标按下:顶部左侧</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_tl</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;tl&quot;</span>);<br>&#125;;<br><span class="hljs-comment">//coor鼠标按下:顶部中间</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_tm</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;t&quot;</span>);<br>&#125;;<br><span class="hljs-comment">//coor鼠标按下:顶部右侧</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_tr</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;tr&quot;</span>);<br>&#125;;<br><span class="hljs-comment">//coor鼠标按下:中部左侧</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_ml</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;l&quot;</span>);<br>&#125;;<br><span class="hljs-comment">//coor鼠标按下:中部右侧</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_mr</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;r&quot;</span>);<br>&#125;;<br><br><span class="hljs-comment">//coor,向右侧拖动</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">setMoveR</span> = (<span class="hljs-params">location</span>) =&gt; &#123;<br>  <span class="hljs-keyword">let</span> mask = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>);<br>  <span class="hljs-keyword">var</span> disHe = location.<span class="hljs-property">x</span> - clickX.<span class="hljs-property">value</span>;<br>  <span class="hljs-keyword">var</span> widthe = origin_w.<span class="hljs-property">value</span> + disHe;<br>  <span class="hljs-keyword">if</span> (origin_x.<span class="hljs-property">value</span> - wrapper_x.<span class="hljs-property">value</span> + widthe &gt; wrapper_w.<span class="hljs-property">value</span>) &#123;<br>    widthe = wrapper_w.<span class="hljs-property">value</span> - (origin_x.<span class="hljs-property">value</span> - wrapper_x.<span class="hljs-property">value</span>);<br>  &#125;<br><br>  mask.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = widthe + <span class="hljs-string">&quot;px&quot;</span>;<br>&#125;;<br><span class="hljs-comment">//coor,向底部拖动</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">setMoveB</span> = (<span class="hljs-params">location</span>) =&gt; &#123;<br>  <span class="hljs-keyword">let</span> mask = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>);<br>  <span class="hljs-keyword">var</span> disVs = location.<span class="hljs-property">y</span> - clickY.<span class="hljs-property">value</span>;<br>  <span class="hljs-keyword">var</span> heights = origin_h.<span class="hljs-property">value</span> + disVs;<br>  <span class="hljs-keyword">if</span> (origin_y.<span class="hljs-property">value</span> - wrapper_y.<span class="hljs-property">value</span> + heights &gt; wrapper_h.<span class="hljs-property">value</span>) &#123;<br>    heights = wrapper_h.<span class="hljs-property">value</span> - (origin_y.<span class="hljs-property">value</span> - wrapper_y.<span class="hljs-property">value</span>);<br>  &#125;<br><br>  mask.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = heights + <span class="hljs-string">&quot;px&quot;</span>;<br>&#125;;<br><span class="hljs-comment">//coor,向左侧拖动</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">setMoveL</span> = (<span class="hljs-params">location, disX</span>) =&gt; &#123;<br>  <span class="hljs-keyword">let</span> mask = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>);<br>  <span class="hljs-keyword">if</span> (disX &gt;= <span class="hljs-number">0</span>) &#123;<br>    <span class="hljs-keyword">var</span> disH = location.<span class="hljs-property">x</span> - clickX.<span class="hljs-property">value</span>;<br>    <span class="hljs-keyword">var</span> widthw = origin_w.<span class="hljs-property">value</span> - disH;<br>    mask.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = widthw + <span class="hljs-string">&quot;px&quot;</span>;<br>  &#125;<br><br>  <span class="hljs-keyword">if</span> (disX &gt;= <span class="hljs-number">0</span>) &#123;<br>    mask.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = disX + <span class="hljs-string">&quot;px&quot;</span>;<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    mask.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = <span class="hljs-string">&quot;0px&quot;</span>;<br>  &#125;<br>&#125;;<br><br><span class="hljs-comment">//coor,向顶部拖动</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">setMoveT</span> = (<span class="hljs-params">location, disY</span>) =&gt; &#123;<br>  <span class="hljs-keyword">let</span> mask = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>);<br>  <span class="hljs-keyword">if</span> (disY &gt;= <span class="hljs-number">0</span>) &#123;<br>    <span class="hljs-comment">//拉伸值</span><br>    <span class="hljs-keyword">var</span> disV = location.<span class="hljs-property">y</span> - clickY.<span class="hljs-property">value</span>;<br><br>    <span class="hljs-keyword">var</span> heightn = origin_h.<span class="hljs-property">value</span> - disV;<br>    mask.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = heightn + <span class="hljs-string">&quot;px&quot;</span>;<br>  &#125;<br>  <span class="hljs-keyword">if</span> (disY &gt;= <span class="hljs-number">0</span>) &#123;<br>    mask.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = disY + <span class="hljs-string">&quot;px&quot;</span>;<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    mask.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = <span class="hljs-string">&quot;0px&quot;</span>;<br>  &#125;<br>&#125;;<br><br><span class="hljs-comment">//mask可以移动到的最右位置</span><br><span class="hljs-keyword">const</span> rightMax = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><span class="hljs-comment">//mask可以移动到的最下位置</span><br><span class="hljs-keyword">const</span> bottomMax = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><br><span class="hljs-comment">//移动mask的方法</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">setMoveMask</span> = (<span class="hljs-params">location</span>) =&gt; &#123;<br>  <span class="hljs-keyword">var</span> nx = location.<span class="hljs-property">x</span>;<br>  <span class="hljs-keyword">var</span> ny = location.<span class="hljs-property">y</span>;<br>  <span class="hljs-comment">//计算移动后的左偏移量和顶部的偏移量</span><br>  <span class="hljs-keyword">var</span> nl = nx - (clickX.<span class="hljs-property">value</span> - origin_x.<span class="hljs-property">value</span>) - wrapper_x.<span class="hljs-property">value</span>;<br>  <span class="hljs-keyword">var</span> nt = ny - (clickY.<span class="hljs-property">value</span> - origin_y.<span class="hljs-property">value</span>) - wrapper_y.<span class="hljs-property">value</span>;<br><br>  <span class="hljs-keyword">if</span> (nl &lt; <span class="hljs-number">0</span>) &#123;<br>    nl = <span class="hljs-number">0</span>;<br>  &#125;<br>  <span class="hljs-keyword">if</span> (nl &gt; rightMax.<span class="hljs-property">value</span>) &#123;<br>    nl = rightMax.<span class="hljs-property">value</span>;<br>  &#125;<br>  <span class="hljs-keyword">if</span> (nt &lt; <span class="hljs-number">0</span>) &#123;<br>    nt = <span class="hljs-number">0</span>;<br>  &#125;<br>  <span class="hljs-keyword">if</span> (nt &gt; bottomMax.<span class="hljs-property">value</span>) &#123;<br>    nt = bottomMax.<span class="hljs-property">value</span>;<br>  &#125;<br><br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>).<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = nl + <span class="hljs-string">&quot;px&quot;</span>;<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>).<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = nt + <span class="hljs-string">&quot;px&quot;</span>;<br>&#125;;<br><br><span class="hljs-comment">//鼠标移动的通用处理方法</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">move</span> = (<span class="hljs-params">operateType, location</span>) =&gt; &#123;<br>  <span class="hljs-comment">//距离图片容器顶部的y距离</span><br>  <span class="hljs-keyword">let</span> disY = origin_y.<span class="hljs-property">value</span> + (location.<span class="hljs-property">y</span> - clickY.<span class="hljs-property">value</span>) - wrapper_y.<span class="hljs-property">value</span>;<br>  <span class="hljs-comment">//距离图片容器左边的x距离</span><br>  <span class="hljs-keyword">let</span> disX = origin_x.<span class="hljs-property">value</span> + (location.<span class="hljs-property">x</span> - clickX.<span class="hljs-property">value</span>) - wrapper_x.<span class="hljs-property">value</span>;<br><br>  <span class="hljs-keyword">switch</span> (operateType) &#123;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;r&quot;</span>:<br>      <span class="hljs-title function_">setMoveR</span>(location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;b&quot;</span>:<br>      <span class="hljs-title function_">setMoveB</span>(location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;l&quot;</span>:<br>      <span class="hljs-title function_">setMoveL</span>(location, disX);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;t&quot;</span>:<br>      <span class="hljs-title function_">setMoveT</span>(location, disY);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;br&quot;</span>:<br>      <span class="hljs-title function_">setMoveB</span>(location);<br>      <span class="hljs-title function_">setMoveR</span>(location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;tr&quot;</span>:<br>      <span class="hljs-title function_">setMoveT</span>(location, disY);<br>      <span class="hljs-title function_">setMoveR</span>(location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;tl&quot;</span>:<br>      <span class="hljs-title function_">setMoveT</span>(location, disY);<br>      <span class="hljs-title function_">setMoveL</span>(location, disX);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;bl&quot;</span>:<br>      <span class="hljs-title function_">setMoveB</span>(location);<br>      <span class="hljs-title function_">setMoveL</span>(location, disX);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;mask&quot;</span>:<br>      <span class="hljs-title function_">setMoveMask</span>(location);<br>      <span class="hljs-keyword">break</span>;<br>  &#125;<br>&#125;;<br><br><span class="hljs-comment">//当页面中鼠标移动时触发</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">onDragMove</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-keyword">var</span> location = <span class="hljs-title function_">getLocation</span>(e);<br>  <span class="hljs-keyword">switch</span> (operateType.<span class="hljs-property">value</span>) &#123;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;t&quot;</span>:<br>      <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;t&quot;</span>, location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;b&quot;</span>:<br>      <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;b&quot;</span>, location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;l&quot;</span>:<br>      <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;l&quot;</span>, location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;r&quot;</span>:<br>      <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;r&quot;</span>, location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;tl&quot;</span>:<br>      <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;tl&quot;</span>, location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;tr&quot;</span>:<br>      <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;tr&quot;</span>, location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;bl&quot;</span>:<br>      <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;bl&quot;</span>, location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;br&quot;</span>:<br>      <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;br&quot;</span>, location);<br>      <span class="hljs-keyword">break</span>;<br>    <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;mask&quot;</span>:<br>      <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;mask&quot;</span>, location);<br>      <span class="hljs-keyword">break</span>;<br>  &#125;<br>  <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>&#125;;<br><br><span class="hljs-comment">//mask的宽度</span><br><span class="hljs-keyword">const</span> origin_w = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><span class="hljs-comment">//mask的高度</span><br><span class="hljs-keyword">const</span> origin_h = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><span class="hljs-comment">//mask的x</span><br><span class="hljs-keyword">const</span> origin_x = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><span class="hljs-comment">//mask的y</span><br><span class="hljs-keyword">const</span> origin_y = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);<br><br><span class="hljs-comment">// mounted,页面加载成功的生命周期</span><br><span class="hljs-title function_">onMounted</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-property">onmousemove</span> = onDragMove;<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-property">onmouseup</span> = onDragUp;<br>&#125;);<br><br><span class="hljs-comment">//当鼠标在mask区域中按下时触发</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">maskDown</span> = (<span class="hljs-params">e</span>) =&gt; &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;-------------------maskdown begin&quot;</span>);<br>  <span class="hljs-comment">//获取位置信息</span><br>  <span class="hljs-keyword">var</span> location = <span class="hljs-title function_">getLocation</span>(e);<br>  clickY.<span class="hljs-property">value</span> = location.<span class="hljs-property">y</span>;<br>  clickX.<span class="hljs-property">value</span> = location.<span class="hljs-property">x</span>;<br><br>  operateType.<span class="hljs-property">value</span> = <span class="hljs-string">&quot;mask&quot;</span>;<br><br>  origin_w.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">width</span>;<br>  origin_h.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span>;<br><br>  origin_x.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">left</span>;<br>  origin_y.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">top</span>;<br><br>  wrapper_x.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">left</span>;<br>  wrapper_y.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">top</span>;<br><br>  wrapper_w.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">width</span>;<br>  wrapper_h.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span><br>    .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)<br>    .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span>;<br><br>  rightMax.<span class="hljs-property">value</span> = wrapper_w.<span class="hljs-property">value</span> - origin_w.<span class="hljs-property">value</span>;<br>  bottomMax.<span class="hljs-property">value</span> = wrapper_h.<span class="hljs-property">value</span> - origin_h.<span class="hljs-property">value</span>;<br>&#125;;<br></code></pre></td></tr></table></figure></li>
</ul>
</li>
<li><p>截取并下载图片</p>
<ul>
<li><p>判断原始选择图片是竖图还是横图, 用来保证截取图片的比例</p>
</li>
<li><p>获取mask拉伸容器的大小, 生成相同大小的canvas元素</p>
</li>
<li><p>获取mask的位置 用于定位canvas截取</p>
</li>
<li><p>利用 <code>canvas.drawImage</code>  api提取图片,  <code>canvas.toDataURL</code>返回一个dataUrl可供下载</p>
</li>
<li><p>用创建一个a标签模仿点击的方式下载图片</p>
</li>
<li><p>&#96;&#96;&#96;javascript<br>&#x2F;&#x2F;截取选中的图片区域并下载文件<br>const down &#x3D; () &#x3D;&gt; {<br>  const canvas &#x3D; document.createElement(“canvas”);<br>  const ctx &#x3D; canvas.getContext(“2d”);</p>
<p>  &#x2F;&#x2F;计算，得到原始的位置和宽高<br>  let sourceImage &#x3D; document.getElementById(“img”);</p>
<p>  &#x2F;&#x2F;判断图片是横片还是竖片<br>  let ratio &#x3D; 0;<br>  if (imgWidth.value &gt;&#x3D; imgHeight.value) {<br>let naturalWidth &#x3D; sourceImage.naturalWidth;<br>ratio &#x3D; naturalWidth &#x2F; 800;<br>  } else {<br>let naturalHeight &#x3D; sourceImage.naturalHeight;<br>ratio &#x3D; naturalHeight &#x2F; 800;<br>  }</p>
<p>  const x &#x3D; parseInt(document.getElementById(“mask”).style.left) * ratio;<br>  const y &#x3D; parseInt(document.getElementById(“mask”).style.top) * ratio;<br>  const width &#x3D;<br>parseInt(document.getElementById(“mask”).style.width) * ratio;<br>  const height &#x3D;<br>parseInt(document.getElementById(“mask”).style.height) * ratio;<br>  canvas.width &#x3D; width;<br>  canvas.height &#x3D; height;<br>  &#x2F;&#x2F;保存截取部分到canvas<br>  ctx.drawImage(sourceImage, x, y, width, height, 0, 0, width, height);<br>  &#x2F;&#x2F;保存:<br>  downJpgByCanvas(canvas);<br>};</p>
<p>&#x2F;&#x2F;下载图片<br>const downJpgByCanvas &#x3D; (canvas) &#x3D;&gt; {<br>  var oA &#x3D; document.createElement(“a”);<br>  let time &#x3D; timeFormat();<br>  oA.download &#x3D; “img_” + time + “.jpg”; &#x2F;&#x2F; 设置下载的文件名，默认是’下载’<br>  oA.href &#x3D; canvas.toDataURL(“image&#x2F;jpeg”);<br>  document.body.appendChild(oA);<br>  oA.click();<br>  oA.remove(); &#x2F;&#x2F; 下载之后把创建的元素删除<br>};</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br><span class="line">486</span><br><span class="line">487</span><br><span class="line">488</span><br><span class="line">489</span><br><span class="line">490</span><br><span class="line">491</span><br><span class="line">492</span><br><span class="line">493</span><br><span class="line">494</span><br><span class="line">495</span><br><span class="line">496</span><br><span class="line">497</span><br><span class="line">498</span><br><span class="line">499</span><br><span class="line">500</span><br><span class="line">501</span><br><span class="line">502</span><br><span class="line">503</span><br><span class="line">504</span><br><span class="line">505</span><br><span class="line">506</span><br><span class="line">507</span><br><span class="line">508</span><br><span class="line">509</span><br><span class="line">510</span><br><span class="line">511</span><br><span class="line">512</span><br><span class="line">513</span><br><span class="line">514</span><br><span class="line">515</span><br><span class="line">516</span><br><span class="line">517</span><br><span class="line">518</span><br><span class="line">519</span><br><span class="line">520</span><br><span class="line">521</span><br><span class="line">522</span><br><span class="line">523</span><br><span class="line">524</span><br><span class="line">525</span><br><span class="line">526</span><br><span class="line">527</span><br><span class="line">528</span><br><span class="line">529</span><br><span class="line">530</span><br><span class="line">531</span><br><span class="line">532</span><br><span class="line">533</span><br><span class="line">534</span><br><span class="line">535</span><br><span class="line">536</span><br><span class="line">537</span><br><span class="line">538</span><br><span class="line">539</span><br><span class="line">540</span><br><span class="line">541</span><br><span class="line">542</span><br><span class="line">543</span><br><span class="line">544</span><br><span class="line">545</span><br><span class="line">546</span><br><span class="line">547</span><br><span class="line">548</span><br><span class="line">549</span><br><span class="line">550</span><br><span class="line">551</span><br><span class="line">552</span><br><span class="line">553</span><br><span class="line">554</span><br><span class="line">555</span><br><span class="line">556</span><br><span class="line">557</span><br><span class="line">558</span><br><span class="line">559</span><br><span class="line">560</span><br><span class="line">561</span><br><span class="line">562</span><br><span class="line">563</span><br><span class="line">564</span><br><span class="line">565</span><br><span class="line">566</span><br><span class="line">567</span><br><span class="line">568</span><br><span class="line">569</span><br><span class="line">570</span><br><span class="line">571</span><br><span class="line">572</span><br><span class="line">573</span><br><span class="line">574</span><br><span class="line">575</span><br><span class="line">576</span><br><span class="line">577</span><br><span class="line">578</span><br><span class="line">579</span><br><span class="line">580</span><br><span class="line">581</span><br><span class="line">582</span><br><span class="line">583</span><br><span class="line">584</span><br><span class="line">585</span><br><span class="line">586</span><br><span class="line">587</span><br><span class="line">588</span><br><span class="line">589</span><br><span class="line">590</span><br><span class="line">591</span><br><span class="line">592</span><br><span class="line">593</span><br><span class="line">594</span><br><span class="line">595</span><br><span class="line">596</span><br><span class="line">597</span><br><span class="line">598</span><br><span class="line">599</span><br><span class="line">600</span><br><span class="line">601</span><br><span class="line">602</span><br><span class="line">603</span><br><span class="line">604</span><br><span class="line">605</span><br><span class="line">606</span><br><span class="line">607</span><br><span class="line">608</span><br><span class="line">609</span><br><span class="line">610</span><br><span class="line">611</span><br><span class="line">612</span><br><span class="line">613</span><br><span class="line">614</span><br><span class="line">615</span><br><span class="line">616</span><br><span class="line">617</span><br><span class="line">618</span><br><span class="line">619</span><br><span class="line">620</span><br><span class="line">621</span><br><span class="line">622</span><br><span class="line">623</span><br><span class="line">624</span><br><span class="line">625</span><br><span class="line">626</span><br><span class="line">627</span><br><span class="line">628</span><br><span class="line">629</span><br><span class="line">630</span><br><span class="line">631</span><br><span class="line">632</span><br><span class="line">633</span><br><span class="line">634</span><br><span class="line">635</span><br><span class="line">636</span><br><span class="line">637</span><br><span class="line">638</span><br><span class="line">639</span><br></pre></td><td class="code"><pre><code class="hljs xml">  <br>- 整体代码如下<br><br>  ```vue<br>  <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 800px; margin: auto&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span></span><br><span class="hljs-tag">          <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;wrapper&quot;</span></span><br><span class="hljs-tag">          <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;display: none; position: relative; overflow: hidden&quot;</span></span><br><span class="hljs-tag">        &gt;</span><br>          <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;img&quot;</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">&quot;imgSrc&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 800px; display: block&quot;</span> /&gt;</span><br>  <br>          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mask&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mask&quot;</span> @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;maskDown&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;coor_tl&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;coor_tl&quot;</span> @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;coormousedown_tl&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;coor_tm&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;coor_tm&quot;</span> @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;coormousedown_tm&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;coor_tr&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;coor_tr&quot;</span> @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;coormousedown_tr&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;coor_ml&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;coor_ml&quot;</span> @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;coormousedown_ml&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;coor_mr&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;coor_mr&quot;</span> @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;coormousedown_mr&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;coor_bl&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;coor_bl&quot;</span> @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;coormousedown_bl&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;coor_bm&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;coor_bm&quot;</span> @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;coormousedown_bm&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;coor_br&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;coor_br&quot;</span> @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;coormousedown_br&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>          选择图片:<br>          <span class="hljs-tag">&lt;<span class="hljs-name">input</span></span><br><span class="hljs-tag">            <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;file&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;hiddenfile&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">accept</span>=<span class="hljs-string">&quot;image/*&quot;</span></span><br><span class="hljs-tag">            @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;readImg&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;hiddenInput&quot;</span></span><br><span class="hljs-tag">          /&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>          <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span></span><br><span class="hljs-tag">            <span class="hljs-attr">:disabled</span>=<span class="hljs-string">&quot;buttonEnable === true ? false : true&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">plain</span></span><br><span class="hljs-tag">            @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;down&quot;</span></span><br><span class="hljs-tag">            <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 400px; margin-top: 10px&quot;</span></span><br><span class="hljs-tag">            &gt;</span>截取图片并下载&lt;/el-button<br>          &gt;<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span><br>  <br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">  <span class="hljs-keyword">import</span> &#123; ref, onMounted &#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span><br><span class="language-javascript">    <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;ImageCrop&quot;</span>,</span><br><span class="language-javascript">    <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) &#123;</span><br><span class="language-javascript">      <span class="hljs-comment">//图片的src</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> imgSrc = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);</span><br><span class="language-javascript">      <span class="hljs-comment">//图片的原宽高</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> imgWidth = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> imgHeight = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">      <span class="hljs-comment">//读取图片的信息</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">readImg</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-comment">//获取上传图片的信息</span></span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> file = e.<span class="hljs-property">target</span>.<span class="hljs-property">files</span>[<span class="hljs-number">0</span>];</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> reader = <span class="hljs-keyword">new</span> <span class="hljs-title class_">FileReader</span>();</span><br><span class="language-javascript">        reader.<span class="hljs-title function_">readAsDataURL</span>(file);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>).<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">&quot;&quot;</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        reader.<span class="hljs-property">onload</span> = <span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="language-javascript">          <span class="hljs-comment">//显示图片</span></span><br><span class="language-javascript">          imgSrc.<span class="hljs-property">value</span> = reader.<span class="hljs-property">result</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">          <span class="hljs-keyword">let</span> img = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Image</span>();</span><br><span class="language-javascript">          img.<span class="hljs-property">src</span> = reader.<span class="hljs-property">result</span>; <span class="hljs-comment">//展示所选择的图片</span></span><br><span class="language-javascript">          img.<span class="hljs-property">onload</span> = <span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="language-javascript">            <span class="hljs-comment">//保存宽高</span></span><br><span class="language-javascript">            imgWidth.<span class="hljs-property">value</span> = img.<span class="hljs-property">width</span>;</span><br><span class="language-javascript">            imgHeight.<span class="hljs-property">value</span> = img.<span class="hljs-property">height</span>;</span><br><span class="language-javascript">            <span class="hljs-comment">//设置图片和wrapper的宽高</span></span><br><span class="language-javascript">            <span class="hljs-keyword">let</span> imgStyle = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">              .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;img&quot;</span>)</span><br><span class="language-javascript">              .<span class="hljs-title function_">getAttributeNode</span>(<span class="hljs-string">&quot;style&quot;</span>);</span><br><span class="language-javascript">            <span class="hljs-keyword">let</span> wrapper = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>);</span><br><span class="language-javascript">            <span class="hljs-comment">//判断图片是竖的还是横的</span></span><br><span class="language-javascript">            <span class="hljs-keyword">if</span> (img.<span class="hljs-property">width</span> &gt;= img.<span class="hljs-property">height</span>) &#123;</span><br><span class="language-javascript">              imgStyle.<span class="hljs-property">value</span> = <span class="hljs-string">&quot;width:800px;display: block;&quot;</span>;</span><br><span class="language-javascript">              wrapper.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">&quot;800px&quot;</span>;</span><br><span class="language-javascript">              <span class="hljs-keyword">let</span> wHeight = (<span class="hljs-number">800</span> * img.<span class="hljs-property">height</span>) / img.<span class="hljs-property">width</span>;</span><br><span class="language-javascript">              wrapper.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = wHeight + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">              wrapper.<span class="hljs-property">style</span>.<span class="hljs-property">marginLeft</span> = <span class="hljs-string">&quot;0px&quot;</span>;</span><br><span class="language-javascript">            &#125; <span class="hljs-keyword">else</span> &#123;</span><br><span class="language-javascript">              <span class="hljs-comment">//document.getElementById(&#x27;img&#x27;).style.height = &#x27;800px&#x27;;</span></span><br><span class="language-javascript">              imgStyle.<span class="hljs-property">value</span> = <span class="hljs-string">&quot;height:800px;display: block;&quot;</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">              wrapper.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = <span class="hljs-string">&quot;800px&quot;</span>;</span><br><span class="language-javascript">              <span class="hljs-keyword">let</span> wWidth = (<span class="hljs-number">800</span> * img.<span class="hljs-property">width</span>) / img.<span class="hljs-property">height</span>;</span><br><span class="language-javascript">              wrapper.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = wWidth + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">              wrapper.<span class="hljs-property">style</span>.<span class="hljs-property">marginLeft</span> = (<span class="hljs-number">800</span> - wWidth) / <span class="hljs-number">2</span> + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">            <span class="hljs-comment">//重置选区的位置</span></span><br><span class="language-javascript">            <span class="hljs-keyword">let</span> mask = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>);</span><br><span class="language-javascript">            mask.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">&quot;100px&quot;</span>;</span><br><span class="language-javascript">            mask.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = <span class="hljs-string">&quot;100px&quot;</span>;</span><br><span class="language-javascript">            mask.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = <span class="hljs-string">&quot;20px&quot;</span>;</span><br><span class="language-javascript">            mask.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = <span class="hljs-string">&quot;20px&quot;</span>;</span><br><span class="language-javascript">          &#125;;</span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">// 当前操作的类型,标记当前要拖动的区域</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> operateType = <span class="hljs-title function_">ref</span>(<span class="hljs-string">&quot;&quot;</span>);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//记录点击时的x位置</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> clickX = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">      <span class="hljs-comment">//记录点击时的y位置</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> clickY = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//从event中得到位置</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">getLocation</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">return</span> &#123;</span><br><span class="language-javascript">          <span class="hljs-attr">x</span>: e.<span class="hljs-property">x</span> || e.<span class="hljs-property">clientX</span>,</span><br><span class="language-javascript">          <span class="hljs-attr">y</span>: e.<span class="hljs-property">y</span> || e.<span class="hljs-property">clientY</span>,</span><br><span class="language-javascript">        &#125;;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//容器的位置x</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> wrapper_x = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">      <span class="hljs-comment">//容器的位置y</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> wrapper_y = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">      <span class="hljs-comment">//容器的宽度</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> wrapper_w = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">      <span class="hljs-comment">//容器的高度</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> wrapper_h = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//鼠标在coor上面按下时的处理函数</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">onDragDown</span> = (<span class="hljs-params">e, type</span>) =&gt; &#123;</span><br><span class="language-javascript">        e.<span class="hljs-title function_">stopPropagation</span>();</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;begin onDragDown&quot;</span>);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        origin_w.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">width</span>;</span><br><span class="language-javascript">        origin_h.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        origin_x.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">left</span>;</span><br><span class="language-javascript">        origin_y.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">top</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        wrapper_x.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">left</span>;</span><br><span class="language-javascript">        wrapper_y.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">top</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        wrapper_w.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">width</span>;</span><br><span class="language-javascript">        wrapper_h.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> location = <span class="hljs-title function_">getLocation</span>(e);</span><br><span class="language-javascript">        clickY.<span class="hljs-property">value</span> = location.<span class="hljs-property">y</span>;</span><br><span class="language-javascript">        clickX.<span class="hljs-property">value</span> = location.<span class="hljs-property">x</span>;</span><br><span class="language-javascript">        operateType.<span class="hljs-property">value</span> = type;</span><br><span class="language-javascript">        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//鼠标松开时的事件</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">onDragUp</span> = (<span class="hljs-params"></span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">style</span>.<span class="hljs-property">cursor</span> = <span class="hljs-string">&quot;auto&quot;</span>;</span><br><span class="language-javascript">        operateType.<span class="hljs-property">value</span> = <span class="hljs-literal">null</span>;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//coor鼠标按下:底部左侧</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_bl</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;bl&quot;</span>);</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//coor鼠标按下:底部中间</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_bm</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;b&quot;</span>);</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//coor鼠标按下:底部右侧</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_br</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;br&quot;</span>);</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//coor鼠标按下:顶部左侧</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_tl</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;tl&quot;</span>);</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//coor鼠标按下:顶部中间</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_tm</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;t&quot;</span>);</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//coor鼠标按下:顶部右侧</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_tr</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;tr&quot;</span>);</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//coor鼠标按下:中部左侧</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_ml</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;l&quot;</span>);</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//coor鼠标按下:中部右侧</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">coormousedown_mr</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-title function_">onDragDown</span>(e, <span class="hljs-string">&quot;r&quot;</span>);</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//coor,向右侧拖动</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">setMoveR</span> = (<span class="hljs-params">location</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> mask = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> disHe = location.<span class="hljs-property">x</span> - clickX.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> widthe = origin_w.<span class="hljs-property">value</span> + disHe;</span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (origin_x.<span class="hljs-property">value</span> - wrapper_x.<span class="hljs-property">value</span> + widthe &gt; wrapper_w.<span class="hljs-property">value</span>) &#123;</span><br><span class="language-javascript">          widthe = wrapper_w.<span class="hljs-property">value</span> - (origin_x.<span class="hljs-property">value</span> - wrapper_x.<span class="hljs-property">value</span>);</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        mask.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = widthe + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//coor,向底部拖动</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">setMoveB</span> = (<span class="hljs-params">location</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> mask = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> disVs = location.<span class="hljs-property">y</span> - clickY.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> heights = origin_h.<span class="hljs-property">value</span> + disVs;</span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (origin_y.<span class="hljs-property">value</span> - wrapper_y.<span class="hljs-property">value</span> + heights &gt; wrapper_h.<span class="hljs-property">value</span>) &#123;</span><br><span class="language-javascript">          heights = wrapper_h.<span class="hljs-property">value</span> - (origin_y.<span class="hljs-property">value</span> - wrapper_y.<span class="hljs-property">value</span>);</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        mask.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = heights + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//coor,向左侧拖动</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">setMoveL</span> = (<span class="hljs-params">location, disX</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> mask = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (disX &gt;= <span class="hljs-number">0</span>) &#123;</span><br><span class="language-javascript">          <span class="hljs-keyword">var</span> disH = location.<span class="hljs-property">x</span> - clickX.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">var</span> widthw = origin_w.<span class="hljs-property">value</span> - disH;</span><br><span class="language-javascript">          mask.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = widthw + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (disX &gt;= <span class="hljs-number">0</span>) &#123;</span><br><span class="language-javascript">          mask.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = disX + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">        &#125; <span class="hljs-keyword">else</span> &#123;</span><br><span class="language-javascript">          mask.<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = <span class="hljs-string">&quot;0px&quot;</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//coor,向顶部拖动</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">setMoveT</span> = (<span class="hljs-params">location, disY</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> mask = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (disY &gt;= <span class="hljs-number">0</span>) &#123;</span><br><span class="language-javascript">          <span class="hljs-comment">//拉伸值</span></span><br><span class="language-javascript">          <span class="hljs-keyword">var</span> disV = location.<span class="hljs-property">y</span> - clickY.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">          <span class="hljs-keyword">var</span> heightn = origin_h.<span class="hljs-property">value</span> - disV;</span><br><span class="language-javascript">          mask.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = heightn + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (disY &gt;= <span class="hljs-number">0</span>) &#123;</span><br><span class="language-javascript">          mask.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = disY + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">        &#125; <span class="hljs-keyword">else</span> &#123;</span><br><span class="language-javascript">          mask.<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = <span class="hljs-string">&quot;0px&quot;</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//mask可以移动到的最右位置</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> rightMax = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">      <span class="hljs-comment">//mask可以移动到的最下位置</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> bottomMax = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//移动mask的方法</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">setMoveMask</span> = (<span class="hljs-params">location</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> nx = location.<span class="hljs-property">x</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> ny = location.<span class="hljs-property">y</span>;</span><br><span class="language-javascript">        <span class="hljs-comment">//计算移动后的左偏移量和顶部的偏移量</span></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> nl = nx - (clickX.<span class="hljs-property">value</span> - origin_x.<span class="hljs-property">value</span>) - wrapper_x.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> nt = ny - (clickY.<span class="hljs-property">value</span> - origin_y.<span class="hljs-property">value</span>) - wrapper_y.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (nl &lt; <span class="hljs-number">0</span>) &#123;</span><br><span class="language-javascript">          nl = <span class="hljs-number">0</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (nl &gt; rightMax.<span class="hljs-property">value</span>) &#123;</span><br><span class="language-javascript">          nl = rightMax.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (nt &lt; <span class="hljs-number">0</span>) &#123;</span><br><span class="language-javascript">          nt = <span class="hljs-number">0</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (nt &gt; bottomMax.<span class="hljs-property">value</span>) &#123;</span><br><span class="language-javascript">          nt = bottomMax.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>).<span class="hljs-property">style</span>.<span class="hljs-property">left</span> = nl + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">        <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>).<span class="hljs-property">style</span>.<span class="hljs-property">top</span> = nt + <span class="hljs-string">&quot;px&quot;</span>;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//鼠标移动的通用处理方法</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">move</span> = (<span class="hljs-params">operateType, location</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-comment">//距离图片容器顶部的y距离</span></span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> disY = origin_y.<span class="hljs-property">value</span> + (location.<span class="hljs-property">y</span> - clickY.<span class="hljs-property">value</span>) - wrapper_y.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">        <span class="hljs-comment">//距离图片容器左边的x距离</span></span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> disX = origin_x.<span class="hljs-property">value</span> + (location.<span class="hljs-property">x</span> - clickX.<span class="hljs-property">value</span>) - wrapper_x.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        <span class="hljs-keyword">switch</span> (operateType) &#123;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;r&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveR</span>(location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;b&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveB</span>(location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;l&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveL</span>(location, disX);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;t&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveT</span>(location, disY);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;br&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveB</span>(location);</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveR</span>(location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;tr&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveT</span>(location, disY);</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveR</span>(location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;tl&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveT</span>(location, disY);</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveL</span>(location, disX);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;bl&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveB</span>(location);</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveL</span>(location, disX);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;mask&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">setMoveMask</span>(location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//当页面中鼠标移动时触发</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">onDragMove</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> location = <span class="hljs-title function_">getLocation</span>(e);</span><br><span class="language-javascript">        <span class="hljs-keyword">switch</span> (operateType.<span class="hljs-property">value</span>) &#123;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;t&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;t&quot;</span>, location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;b&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;b&quot;</span>, location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;l&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;l&quot;</span>, location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;r&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;r&quot;</span>, location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;tl&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;tl&quot;</span>, location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;tr&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;tr&quot;</span>, location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;bl&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;bl&quot;</span>, location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;br&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;br&quot;</span>, location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">          <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;mask&quot;</span>:</span><br><span class="language-javascript">            <span class="hljs-title function_">move</span>(<span class="hljs-string">&quot;mask&quot;</span>, location);</span><br><span class="language-javascript">            <span class="hljs-keyword">break</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//mask的宽度</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> origin_w = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">      <span class="hljs-comment">//mask的高度</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> origin_h = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">      <span class="hljs-comment">//mask的x</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> origin_x = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">      <span class="hljs-comment">//mask的y</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> origin_y = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">// mounted,页面加载成功的生命周期</span></span><br><span class="language-javascript">      <span class="hljs-title function_">onMounted</span>(<span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">document</span>.<span class="hljs-property">onmousemove</span> = onDragMove;</span><br><span class="language-javascript">        <span class="hljs-variable language_">document</span>.<span class="hljs-property">onmouseup</span> = onDragUp;</span><br><span class="language-javascript">      &#125;);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//当鼠标在mask区域中按下时触发</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">maskDown</span> = (<span class="hljs-params">e</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;-------------------maskdown begin&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-comment">//获取位置信息</span></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> location = <span class="hljs-title function_">getLocation</span>(e);</span><br><span class="language-javascript">        clickY.<span class="hljs-property">value</span> = location.<span class="hljs-property">y</span>;</span><br><span class="language-javascript">        clickX.<span class="hljs-property">value</span> = location.<span class="hljs-property">x</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        operateType.<span class="hljs-property">value</span> = <span class="hljs-string">&quot;mask&quot;</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        origin_w.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">width</span>;</span><br><span class="language-javascript">        origin_h.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        origin_x.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">left</span>;</span><br><span class="language-javascript">        origin_y.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">top</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        wrapper_x.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">left</span>;</span><br><span class="language-javascript">        wrapper_y.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">top</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        wrapper_w.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">width</span>;</span><br><span class="language-javascript">        wrapper_h.<span class="hljs-property">value</span> = <span class="hljs-variable language_">document</span></span><br><span class="language-javascript">          .<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;wrapper&quot;</span>)</span><br><span class="language-javascript">          .<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span>;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        rightMax.<span class="hljs-property">value</span> = wrapper_w.<span class="hljs-property">value</span> - origin_w.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">        bottomMax.<span class="hljs-property">value</span> = wrapper_h.<span class="hljs-property">value</span> - origin_h.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//截取选中的图片区域并下载文件</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">down</span> = (<span class="hljs-params"></span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">const</span> canvas = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&quot;canvas&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">const</span> ctx = canvas.<span class="hljs-title function_">getContext</span>(<span class="hljs-string">&quot;2d&quot;</span>);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        <span class="hljs-comment">//计算，得到原始的位置和宽高</span></span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> sourceImage = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;img&quot;</span>);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        <span class="hljs-comment">//判断图片是横片还是竖片</span></span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> ratio = <span class="hljs-number">0</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">if</span> (imgWidth.<span class="hljs-property">value</span> &gt;= imgHeight.<span class="hljs-property">value</span>) &#123;</span><br><span class="language-javascript">          <span class="hljs-keyword">let</span> naturalWidth = sourceImage.<span class="hljs-property">naturalWidth</span>;</span><br><span class="language-javascript">          ratio = naturalWidth / <span class="hljs-number">800</span>;</span><br><span class="language-javascript">        &#125; <span class="hljs-keyword">else</span> &#123;</span><br><span class="language-javascript">          <span class="hljs-keyword">let</span> naturalHeight = sourceImage.<span class="hljs-property">naturalHeight</span>;</span><br><span class="language-javascript">          ratio = naturalHeight / <span class="hljs-number">800</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        <span class="hljs-keyword">const</span> x = <span class="hljs-built_in">parseInt</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>).<span class="hljs-property">style</span>.<span class="hljs-property">left</span>) * ratio;</span><br><span class="language-javascript">        <span class="hljs-keyword">const</span> y = <span class="hljs-built_in">parseInt</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>).<span class="hljs-property">style</span>.<span class="hljs-property">top</span>) * ratio;</span><br><span class="language-javascript">        <span class="hljs-keyword">const</span> width =</span><br><span class="language-javascript">          <span class="hljs-built_in">parseInt</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>).<span class="hljs-property">style</span>.<span class="hljs-property">width</span>) * ratio;</span><br><span class="language-javascript">        <span class="hljs-keyword">const</span> height =</span><br><span class="language-javascript">          <span class="hljs-built_in">parseInt</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;mask&quot;</span>).<span class="hljs-property">style</span>.<span class="hljs-property">height</span>) * ratio;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        canvas.<span class="hljs-property">width</span> = width;</span><br><span class="language-javascript">        canvas.<span class="hljs-property">height</span> = height;</span><br><span class="language-javascript">        <span class="hljs-comment">//保存截取部分到canvas</span></span><br><span class="language-javascript">        ctx.<span class="hljs-title function_">drawImage</span>(sourceImage, x, y, width, height, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, width, height);</span><br><span class="language-javascript">        <span class="hljs-comment">//保存:</span></span><br><span class="language-javascript">        <span class="hljs-title function_">downJpgByCanvas</span>(canvas);</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//下载图片</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">downJpgByCanvas</span> = (<span class="hljs-params">canvas</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> oA = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&quot;a&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> time = <span class="hljs-title function_">timeFormat</span>();</span><br><span class="language-javascript">        oA.<span class="hljs-property">download</span> = <span class="hljs-string">&quot;img_&quot;</span> + time + <span class="hljs-string">&quot;.jpg&quot;</span>; <span class="hljs-comment">// 设置下载的文件名，默认是&#x27;下载&#x27;</span></span><br><span class="language-javascript">        oA.<span class="hljs-property">href</span> = canvas.<span class="hljs-title function_">toDataURL</span>(<span class="hljs-string">&quot;image/jpeg&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">appendChild</span>(oA);</span><br><span class="language-javascript">        oA.<span class="hljs-title function_">click</span>();</span><br><span class="language-javascript">        oA.<span class="hljs-title function_">remove</span>(); <span class="hljs-comment">// 下载之后把创建的元素删除</span></span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-comment">//补0</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">add0</span> = (<span class="hljs-params">m</span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">return</span> m &lt; <span class="hljs-number">10</span> ? <span class="hljs-string">&quot;0&quot;</span> + m : m;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">      <span class="hljs-comment">//格式化时间</span></span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> <span class="hljs-title function_">timeFormat</span> = (<span class="hljs-params"></span>) =&gt; &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> time = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>();</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> y = time.<span class="hljs-title function_">getFullYear</span>();</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> m = time.<span class="hljs-title function_">getMonth</span>() + <span class="hljs-number">1</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> d = time.<span class="hljs-title function_">getDate</span>();</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> h = time.<span class="hljs-title function_">getHours</span>();</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> mm = time.<span class="hljs-title function_">getMinutes</span>();</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> s = time.<span class="hljs-title function_">getSeconds</span>();</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> res = y + <span class="hljs-title function_">add0</span>(m) + <span class="hljs-title function_">add0</span>(d) + <span class="hljs-title function_">add0</span>(h) + <span class="hljs-title function_">add0</span>(mm) + <span class="hljs-title function_">add0</span>(s);</span><br><span class="language-javascript">        <span class="hljs-keyword">return</span> res;</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-keyword">const</span> buttonEnable = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">true</span>);</span><br><span class="language-javascript">  </span><br><span class="language-javascript">      <span class="hljs-keyword">return</span> &#123;</span><br><span class="language-javascript">        readImg,</span><br><span class="language-javascript">        imgSrc,</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        coormousedown_bl,</span><br><span class="language-javascript">        coormousedown_bm,</span><br><span class="language-javascript">        coormousedown_br,</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        coormousedown_tl,</span><br><span class="language-javascript">        coormousedown_tm,</span><br><span class="language-javascript">        coormousedown_tr,</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        coormousedown_ml,</span><br><span class="language-javascript">        coormousedown_mr,</span><br><span class="language-javascript">        onDragUp,</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        maskDown,</span><br><span class="language-javascript">  </span><br><span class="language-javascript">        down,</span><br><span class="language-javascript">        buttonEnable,</span><br><span class="language-javascript">      &#125;;</span><br><span class="language-javascript">    &#125;,</span><br><span class="language-javascript">  &#125;;</span><br><span class="language-javascript">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>  <br>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;css&quot;</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="language-css"></span><br><span class="language-css">  <span class="hljs-selector-class">.coor_ml</span> &#123;</span><br><span class="language-css">    <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">    <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">top</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">50%</span> - <span class="hljs-number">5px</span>);</span><br><span class="language-css">    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffff</span>;</span><br><span class="language-css">    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.2</span>;</span><br><span class="language-css">    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">5000</span>;</span><br><span class="language-css">    <span class="hljs-attribute">cursor</span>: w-resize;</span><br><span class="language-css">  &#125;</span><br><span class="language-css">  </span><br><span class="language-css">  <span class="hljs-selector-class">.coor_mr</span> &#123;</span><br><span class="language-css">    <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">    <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">    <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">top</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">50%</span> - <span class="hljs-number">5px</span>);</span><br><span class="language-css">    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffff</span>;</span><br><span class="language-css">    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.2</span>;</span><br><span class="language-css">    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">5000</span>;</span><br><span class="language-css">    <span class="hljs-attribute">cursor</span>: e-resize;</span><br><span class="language-css">  &#125;</span><br><span class="language-css">  </span><br><span class="language-css">  <span class="hljs-selector-class">.coor_tl</span> &#123;</span><br><span class="language-css">    <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">    <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffff</span>;</span><br><span class="language-css">    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.2</span>;</span><br><span class="language-css">    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">5000</span>;</span><br><span class="language-css">    <span class="hljs-attribute">cursor</span>: nw-resize;</span><br><span class="language-css">  &#125;</span><br><span class="language-css">  </span><br><span class="language-css">  <span class="hljs-selector-class">.coor_tm</span> &#123;</span><br><span class="language-css">    <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">    <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">    <span class="hljs-attribute">left</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">50%</span> - <span class="hljs-number">5px</span>);</span><br><span class="language-css">    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffff</span>;</span><br><span class="language-css">    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.2</span>;</span><br><span class="language-css">    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">5000</span>;</span><br><span class="language-css">    <span class="hljs-attribute">cursor</span>: n-resize;</span><br><span class="language-css">  &#125;</span><br><span class="language-css">  </span><br><span class="language-css">  <span class="hljs-selector-class">.coor_tr</span> &#123;</span><br><span class="language-css">    <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">    <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">    <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffff</span>;</span><br><span class="language-css">    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.2</span>;</span><br><span class="language-css">    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">5000</span>;</span><br><span class="language-css">    <span class="hljs-attribute">cursor</span>: ne-resize;</span><br><span class="language-css">  &#125;</span><br><span class="language-css">  </span><br><span class="language-css">  <span class="hljs-selector-class">.coor_bl</span> &#123;</span><br><span class="language-css">    <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">    <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffff</span>;</span><br><span class="language-css">    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.2</span>;</span><br><span class="language-css">    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">5000</span>;</span><br><span class="language-css">    <span class="hljs-attribute">cursor</span>: sw-resize;</span><br><span class="language-css">  &#125;</span><br><span class="language-css">  </span><br><span class="language-css">  <span class="hljs-selector-class">.coor_bm</span> &#123;</span><br><span class="language-css">    <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">    <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">    <span class="hljs-attribute">left</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">50%</span> - <span class="hljs-number">5px</span>);</span><br><span class="language-css">    <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffff</span>;</span><br><span class="language-css">    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.2</span>;</span><br><span class="language-css">    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">5000</span>;</span><br><span class="language-css">    <span class="hljs-attribute">cursor</span>: s-resize;</span><br><span class="language-css">  &#125;</span><br><span class="language-css">  </span><br><span class="language-css">  <span class="hljs-selector-class">.coor_br</span> &#123;</span><br><span class="language-css">    <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">    <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">    <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffffff</span>;</span><br><span class="language-css">    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.2</span>;</span><br><span class="language-css">    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">5000</span>;</span><br><span class="language-css">    <span class="hljs-attribute">cursor</span>: se-resize;</span><br><span class="language-css">  &#125;</span><br><span class="language-css">  </span><br><span class="language-css">  <span class="hljs-selector-class">.mask</span> &#123;</span><br><span class="language-css">    <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">left</span>: <span class="hljs-number">20px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">top</span>: <span class="hljs-number">20px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">999vw</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.5</span>);</span><br><span class="language-css">  &#125;</span><br><span class="language-css">  </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>  <br></code></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h1 id="2-后台管理中的权限管理"><a href="#2-后台管理中的权限管理" class="headerlink" title="2.后台管理中的权限管理"></a>2.后台管理中的权限管理</h1><p>对于前端能做到的权限管理,就是控制视图上的菜单或者按钮是否展示给用户.</p>
<h2 id="菜单权限"><a href="#菜单权限" class="headerlink" title="菜单权限"></a>菜单权限</h2><p>在用户信息里储存菜单信息,登陆时提取菜单信息与前端的路由表进行对比, 提取出有权限观看的菜单,通过 <code>addroute</code>动态挂载</p>
<h2 id="按钮权限"><a href="#按钮权限" class="headerlink" title="按钮权限"></a>按钮权限</h2><p>判断用户的权限信息,通过自定义指令来控制按钮显示隐藏,或者禁用.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 注册一个全局自定义指令 `v-auth`</span><br><span class="hljs-title class_">Vue</span>.<span class="hljs-title function_">directive</span>(<span class="hljs-string">&#x27;auth&#x27;</span>, &#123;<br>  <span class="hljs-comment">// 当被绑定的元素插入到 DOM 中时……</span><br>  <span class="hljs-attr">inserted</span>: <span class="hljs-function">(<span class="hljs-params">el, binding, vnode</span>) =&gt;</span> &#123;<br>      <span class="hljs-comment">//按钮上的权限标识</span><br>    <span class="hljs-keyword">const</span> value = binding.<span class="hljs-property">value</span>;<br>	<span class="hljs-comment">//获取权限信息</span><br>    <span class="hljs-keyword">const</span> auths = <span class="hljs-variable language_">localStorage</span>.<span class="hljs-title function_">getItem</span>(<span class="hljs-string">&#x27;BTN_AUTHS&#x27;</span>) || <span class="hljs-string">&#x27;&#x27;</span>;<br><br>    <span class="hljs-keyword">if</span> (!auths.<span class="hljs-title function_">split</span>(<span class="hljs-string">&#x27;,&#x27;</span>).<span class="hljs-title function_">includes</span>(value)) &#123;<br>        <span class="hljs-comment">//移出  还可以修改disable display属性</span><br>      el.<span class="hljs-property">parentNode</span>!.<span class="hljs-title function_">removeChild</span>(el);<br>    &#125;<br>  &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>







<h1 id="3-模仿a标签点击下载后台传输的文件"><a href="#3-模仿a标签点击下载后台传输的文件" class="headerlink" title="3.模仿a标签点击下载后台传输的文件"></a>3.模仿a标签点击下载后台传输的文件</h1><p>通常可用于表格导出. 附件下载等等</p>
<p>通过发送http请求获取blob对象:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-title function_">axios</span>(&#123;<span class="hljs-attr">method</span>:<span class="hljs-string">&#x27;get&#x27;</span>,<span class="hljs-attr">responseType</span>:<span class="hljs-string">&#x27;blob&#x27;</span>,<span class="hljs-attr">url</span>:<span class="hljs-string">&#x27;xxxxx&#x27;</span>&#125;)<br></code></pre></td></tr></table></figure>



<p>模仿a链接点击下载:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-title function_">donwload</span>(<span class="hljs-params">blob, filename</span>) &#123;<br>  <span class="hljs-keyword">var</span> link = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&#x27;a&#x27;</span>)<br>  link.<span class="hljs-property">href</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-property">URL</span>.<span class="hljs-title function_">createObjectURL</span>(blob)<br>  link.<span class="hljs-property">download</span> = filename<br>  link.<span class="hljs-title function_">click</span>()<br>&#125;,<br></code></pre></td></tr></table></figure>





<h1 id="4-http-post请求发送数组变成对象"><a href="#4-http-post请求发送数组变成对象" class="headerlink" title="4.http  post请求发送数组变成对象"></a>4.http  post请求发送数组变成对象</h1><h2 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h2><p>​	浏览器在接收到请求体是数组时 会将数组序列化转换成以下格式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>    <span class="hljs-number">0</span>:&#123;&#125;,<br>    <span class="hljs-number">1</span>:&#123;&#125;,<br>    <span class="hljs-number">2</span>:&#123;&#125;,<br>    <span class="hljs-number">3</span>:&#123;&#125;,<br>        ......<br>&#125;<br></code></pre></td></tr></table></figure>



<h2 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h2><p>配置请求方法transformRequest属性, 用自定义方法将<code>&#123;0:xxx,1:xxx&#125;</code>的格式转换成  <code>[xxx,yyy].</code> 同时请求头需要配置<code>content-type:application/json</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//转换方法</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">transformObjToArr</span>(<span class="hljs-params">data, isRoot=<span class="hljs-literal">true</span></span>)&#123;<br>  <span class="hljs-keyword">if</span>(!data || <span class="hljs-keyword">typeof</span> data !== <span class="hljs-string">&#x27;object&#x27;</span>) <span class="hljs-keyword">return</span> data;<br>  <span class="hljs-keyword">let</span> dataNew = [];<br>  <span class="hljs-keyword">let</span> keys = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(data);<br>  <span class="hljs-keyword">if</span>(keys.<span class="hljs-title function_">includes</span>(<span class="hljs-string">&#x27;0&#x27;</span>))&#123;<br>    keys.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">k</span> =&gt;</span> dataNew[k] = <span class="hljs-title function_">transformObjToArr</span>(data[k], <span class="hljs-literal">false</span>));<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    keys.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">k</span> =&gt;</span> data[k] = <span class="hljs-title function_">transformObjToArr</span>(data[k], <span class="hljs-literal">false</span>));<br>  &#125;<br>  <span class="hljs-keyword">if</span>(isRoot)&#123;<br>    <span class="hljs-keyword">return</span> dataNew.<span class="hljs-property">length</span> ? <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(dataNew) : <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(data);<br>  &#125; <span class="hljs-keyword">else</span> &#123;<br>    <span class="hljs-keyword">return</span> dataNew.<span class="hljs-property">length</span> ? dataNew : data;<br>  &#125;<br>&#125;<br><br><span class="hljs-comment">//在请求方法配置config中配置</span><br>&#123;<br>    ....<br>    <span class="hljs-attr">transformRequest</span>:[<br>        <span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)&#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-title function_">transformObjToArr</span>(data)<br>        &#125;<br>    ]<br>&#125;<br></code></pre></td></tr></table></figure>





<h1 id="5-地图坐标系纠偏"><a href="#5-地图坐标系纠偏" class="headerlink" title="5.地图坐标系纠偏"></a>5.地图坐标系纠偏</h1><p><strong>目前国内地图产品坐标系分类:</strong></p>
<ul>
<li>WGS-84原始坐标系，一般用国际GPS纪录仪记录下来的经纬度，通过GPS定位拿到的原始经纬度. 但是目前国内不允许直接使用WGS84坐标系, 必须经过加密后才能使用.</li>
<li>GCJ-02坐标系, 又名火星坐标系,  我国国测局独创坐标系. 高德和google在国内都是直接使用的该坐标系</li>
<li>BD-09 百度坐标系, 在GCJ-02的基础上在此加密偏移后形成的坐标系,只适用于百度地图.</li>
</ul>
<p><strong>偏移原因:</strong></p>
<p>​	因为通过GPS获取的数据一般是WGS-84原始坐标, 但是在高德等地图上展示的是经过加密的坐标. 所以会出现偏移</p>
<p><strong>转换后若还出现偏移,有可能是以下原因:</strong></p>
<ul>
<li><p>原始坐标系弄错，比如以为自己是GPS坐标，但其实已经是GCJ-02坐标</p>
</li>
<li><p>原始坐标准确度不够</p>
</li>
<li><p>经纬度顺序写反了 </p>
<ul>
<li>google与百度腾讯高德的坐标记录是相反的. 例如google是<code>point(lat,lng)纬度在前经度在后</code>, 而其他的是<code>point(lng,lat)经度在前</code></li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> <span class="hljs-variable constant_">GPS</span> = &#123;<br>    <span class="hljs-attr">PI</span>: <span class="hljs-number">3.14159265358979324</span>,<br>    <span class="hljs-attr">x_pi</span>: <span class="hljs-number">3.14159265358979324</span> * <span class="hljs-number">3000.0</span> / <span class="hljs-number">180.0</span>,<br>    <span class="hljs-attr">delta</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">lat, lon</span>) &#123;<br>        <span class="hljs-comment">// Krasovsky 1940</span><br>        <span class="hljs-comment">//</span><br>        <span class="hljs-comment">// a = 6378245.0, 1/f = 298.3</span><br>        <span class="hljs-comment">// b = a * (1 - f)</span><br>        <span class="hljs-comment">// ee = (a^2 - b^2) / a^2;</span><br>        <span class="hljs-keyword">var</span> a = <span class="hljs-number">6378245.0</span>; <span class="hljs-comment">//  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。</span><br>        <span class="hljs-keyword">var</span> ee = <span class="hljs-number">0.00669342162296594323</span>; <span class="hljs-comment">//  ee: 椭球的偏心率。</span><br>        <span class="hljs-keyword">var</span> dLat = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">transformLat</span>(lon - <span class="hljs-number">105.0</span>, lat - <span class="hljs-number">35.0</span>);<br>        <span class="hljs-keyword">var</span> dLon = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">transformLon</span>(lon - <span class="hljs-number">105.0</span>, lat - <span class="hljs-number">35.0</span>);<br>        <span class="hljs-keyword">var</span> radLat = lat / <span class="hljs-number">180.0</span> * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>;<br>        <span class="hljs-keyword">var</span> magic = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(radLat);<br>        magic = <span class="hljs-number">1</span> - ee * magic * magic;<br>        <span class="hljs-keyword">var</span> sqrtMagic = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sqrt</span>(magic);<br>        dLat = (dLat * <span class="hljs-number">180.0</span>) / ((a * (<span class="hljs-number">1</span> - ee)) / (magic * sqrtMagic) * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>);<br>        dLon = (dLon * <span class="hljs-number">180.0</span>) / (a / sqrtMagic * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">cos</span>(radLat) * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>);<br>        <span class="hljs-keyword">return</span> &#123; <span class="hljs-string">&#x27;lat&#x27;</span>: dLat, <span class="hljs-string">&#x27;lon&#x27;</span>: dLon &#125;;<br>    &#125;,<br><br>    <span class="hljs-comment">//WGS-84 to GCJ-02</span><br>    <span class="hljs-attr">gcj_encrypt</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">wgsLat, wgsLon</span>) &#123;<br>        <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">outOfChina</span>(wgsLat, wgsLon))<br>            <span class="hljs-keyword">return</span> &#123; <span class="hljs-string">&#x27;lat&#x27;</span>: wgsLat, <span class="hljs-string">&#x27;lon&#x27;</span>: wgsLon &#125;;<br><br>        <span class="hljs-keyword">var</span> d = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">delta</span>(wgsLat, wgsLon);<br>        <span class="hljs-keyword">return</span> &#123; <span class="hljs-string">&#x27;lat&#x27;</span>: wgsLat + d.<span class="hljs-property">lat</span>, <span class="hljs-string">&#x27;lon&#x27;</span>: wgsLon + d.<span class="hljs-property">lon</span> &#125;;<br>    &#125;,<br>    <span class="hljs-comment">//GCJ-02 to WGS-84 (粗略)</span><br>    <span class="hljs-attr">gcj_decrypt</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">gcjLat, gcjLon</span>) &#123;<br>        <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">outOfChina</span>(gcjLat, gcjLon))<br>            <span class="hljs-keyword">return</span> &#123; <span class="hljs-string">&#x27;lat&#x27;</span>: gcjLat, <span class="hljs-string">&#x27;lon&#x27;</span>: gcjLon &#125;;<br><br>        <span class="hljs-keyword">var</span> d = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">delta</span>(gcjLat, gcjLon);<br>        <span class="hljs-keyword">return</span> &#123; <span class="hljs-string">&#x27;lat&#x27;</span>: gcjLat - d.<span class="hljs-property">lat</span>, <span class="hljs-string">&#x27;lon&#x27;</span>: gcjLon - d.<span class="hljs-property">lon</span> &#125;;<br>    &#125;,<br>    <span class="hljs-comment">//GCJ-02 to WGS-84 exactly (精确(二分极限法))</span><br>    <span class="hljs-attr">gcj_decrypt_exact</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">gcjLat, gcjLon</span>) &#123;<br>        <span class="hljs-keyword">var</span> initDelta = <span class="hljs-number">0.01</span>;<br>        <span class="hljs-keyword">var</span> threshold = <span class="hljs-number">0.000000001</span>;<br>        <span class="hljs-keyword">var</span> dLat = initDelta, dLon = initDelta;<br>        <span class="hljs-keyword">var</span> mLat = gcjLat - dLat, mLon = gcjLon - dLon;<br>        <span class="hljs-keyword">var</span> pLat = gcjLat + dLat, pLon = gcjLon + dLon;<br>        <span class="hljs-keyword">var</span> wgsLat, wgsLon, i = <span class="hljs-number">0</span>;<br>        <span class="hljs-keyword">while</span> (<span class="hljs-number">1</span>) &#123;<br>            wgsLat = (mLat + pLat) / <span class="hljs-number">2</span>;<br>            wgsLon = (mLon + pLon) / <span class="hljs-number">2</span>;<br>            <span class="hljs-keyword">var</span> tmp = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">gcj_encrypt</span>(wgsLat, wgsLon)<br>            dLat = tmp.<span class="hljs-property">lat</span> - gcjLat;<br>            dLon = tmp.<span class="hljs-property">lon</span> - gcjLon;<br>            <span class="hljs-keyword">if</span> ((<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(dLat) &lt; threshold) &amp;&amp; (<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(dLon) &lt; threshold))<br>                <span class="hljs-keyword">break</span>;<br><br>            <span class="hljs-keyword">if</span> (dLat &gt; <span class="hljs-number">0</span>) pLat = wgsLat; <span class="hljs-keyword">else</span> mLat = wgsLat;<br>            <span class="hljs-keyword">if</span> (dLon &gt; <span class="hljs-number">0</span>) pLon = wgsLon; <span class="hljs-keyword">else</span> mLon = wgsLon;<br><br>            <span class="hljs-keyword">if</span> (++i &gt; <span class="hljs-number">10000</span>) <span class="hljs-keyword">break</span>;<br>        &#125;<br>        <span class="hljs-comment">//console.log(i);</span><br>        <span class="hljs-keyword">return</span> &#123; <span class="hljs-string">&#x27;lat&#x27;</span>: wgsLat, <span class="hljs-string">&#x27;lon&#x27;</span>: wgsLon &#125;;<br>    &#125;,<br>    <span class="hljs-comment">//GCJ-02 to BD-09</span><br>    <span class="hljs-attr">bd_encrypt</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">gcjLat, gcjLon</span>) &#123;<br>        <span class="hljs-keyword">var</span> x = gcjLon, y = gcjLat;<br>        <span class="hljs-keyword">var</span> z = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sqrt</span>(x * x + y * y) + <span class="hljs-number">0.00002</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(y * <span class="hljs-variable language_">this</span>.<span class="hljs-property">x_pi</span>);<br>        <span class="hljs-keyword">var</span> theta = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">atan2</span>(y, x) + <span class="hljs-number">0.000003</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">cos</span>(x * <span class="hljs-variable language_">this</span>.<span class="hljs-property">x_pi</span>);<br>        bdLon = z * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">cos</span>(theta) + <span class="hljs-number">0.0065</span>;<br>        bdLat = z * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(theta) + <span class="hljs-number">0.006</span>;<br>        <span class="hljs-keyword">return</span> &#123; <span class="hljs-string">&#x27;lat&#x27;</span>: bdLat, <span class="hljs-string">&#x27;lon&#x27;</span>: bdLon &#125;;<br>    &#125;,<br>    <span class="hljs-comment">//BD-09 to GCJ-02</span><br>    <span class="hljs-attr">bd_decrypt</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">bdLat, bdLon</span>) &#123;<br>        <span class="hljs-keyword">var</span> x = bdLon - <span class="hljs-number">0.0065</span>, y = bdLat - <span class="hljs-number">0.006</span>;<br>        <span class="hljs-keyword">var</span> z = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sqrt</span>(x * x + y * y) - <span class="hljs-number">0.00002</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(y * <span class="hljs-variable language_">this</span>.<span class="hljs-property">x_pi</span>);<br>        <span class="hljs-keyword">var</span> theta = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">atan2</span>(y, x) - <span class="hljs-number">0.000003</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">cos</span>(x * <span class="hljs-variable language_">this</span>.<span class="hljs-property">x_pi</span>);<br>        <span class="hljs-keyword">var</span> gcjLon = z * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">cos</span>(theta);<br>        <span class="hljs-keyword">var</span> gcjLat = z * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(theta);<br>        <span class="hljs-keyword">return</span> &#123; <span class="hljs-string">&#x27;lat&#x27;</span>: gcjLat, <span class="hljs-string">&#x27;lon&#x27;</span>: gcjLon &#125;;<br>    &#125;,<br>    <span class="hljs-comment">//WGS-84 to Web mercator</span><br>    <span class="hljs-comment">//mercatorLat -&gt; y mercatorLon -&gt; x</span><br>    <span class="hljs-attr">mercator_encrypt</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">wgsLat, wgsLon</span>) &#123;<br>        <span class="hljs-keyword">var</span> x = wgsLon * <span class="hljs-number">20037508.34</span> / <span class="hljs-number">180.</span>;<br>        <span class="hljs-keyword">var</span> y = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">tan</span>((<span class="hljs-number">90.</span> + wgsLat) * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">360.</span>)) / (<span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">180.</span>);<br>        y = y * <span class="hljs-number">20037508.34</span> / <span class="hljs-number">180.</span>;<br>        <span class="hljs-keyword">return</span> &#123; <span class="hljs-string">&#x27;lat&#x27;</span>: y, <span class="hljs-string">&#x27;lon&#x27;</span>: x &#125;;<br>        <span class="hljs-comment">/*</span><br><span class="hljs-comment">         if ((Math.abs(wgsLon) &gt; 180 || Math.abs(wgsLat) &gt; 90))</span><br><span class="hljs-comment">         return null;</span><br><span class="hljs-comment">         var x = 6378137.0 * wgsLon * 0.017453292519943295;</span><br><span class="hljs-comment">         var a = wgsLat * 0.017453292519943295;</span><br><span class="hljs-comment">         var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));</span><br><span class="hljs-comment">         return &#123;&#x27;lat&#x27; : y, &#x27;lon&#x27; : x&#125;;</span><br><span class="hljs-comment">         //*/</span><br>    &#125;,<br>    <span class="hljs-comment">// Web mercator to WGS-84</span><br>    <span class="hljs-comment">// mercatorLat -&gt; y mercatorLon -&gt; x</span><br>    <span class="hljs-attr">mercator_decrypt</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">mercatorLat, mercatorLon</span>) &#123;<br>        <span class="hljs-keyword">var</span> x = mercatorLon / <span class="hljs-number">20037508.34</span> * <span class="hljs-number">180.</span>;<br>        <span class="hljs-keyword">var</span> y = mercatorLat / <span class="hljs-number">20037508.34</span> * <span class="hljs-number">180.</span>;<br>        y = <span class="hljs-number">180</span> / <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> * (<span class="hljs-number">2</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">atan</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">exp</span>(y * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">180.</span>)) - <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">2</span>);<br>        <span class="hljs-keyword">return</span> &#123; <span class="hljs-string">&#x27;lat&#x27;</span>: y, <span class="hljs-string">&#x27;lon&#x27;</span>: x &#125;;<br>        <span class="hljs-comment">/*</span><br><span class="hljs-comment">         if (Math.abs(mercatorLon) &lt; 180 &amp;&amp; Math.abs(mercatorLat) &lt; 90)</span><br><span class="hljs-comment">         return null;</span><br><span class="hljs-comment">         if ((Math.abs(mercatorLon) &gt; 20037508.3427892) || (Math.abs(mercatorLat) &gt; 20037508.3427892))</span><br><span class="hljs-comment">         return null;</span><br><span class="hljs-comment">         var a = mercatorLon / 6378137.0 * 57.295779513082323;</span><br><span class="hljs-comment">         var x = a - (Math.floor(((a + 180.0) / 360.0)) * 360.0);</span><br><span class="hljs-comment">         var y = (1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * mercatorLat) / 6378137.0)))) * 57.295779513082323;</span><br><span class="hljs-comment">         return &#123;&#x27;lat&#x27; : y, &#x27;lon&#x27; : x&#125;;</span><br><span class="hljs-comment">         //*/</span><br>    &#125;,<br>    <span class="hljs-comment">//两点的距离</span><br>    <span class="hljs-attr">distance</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">latA, lonA, latB, lonB</span>) &#123;<br>        <span class="hljs-keyword">var</span> earthR = <span class="hljs-number">6371000.</span>;<br>        <span class="hljs-keyword">var</span> x = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">cos</span>(latA * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">180.</span>) * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">cos</span>(latB * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">180.</span>) * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">cos</span>((lonA - lonB) * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">180</span>);<br>        <span class="hljs-keyword">var</span> y = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(latA * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">180.</span>) * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(latB * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">180.</span>);<br>        <span class="hljs-keyword">var</span> s = x + y;<br>        <span class="hljs-keyword">if</span> (s &gt; <span class="hljs-number">1</span>) s = <span class="hljs-number">1</span>;<br>        <span class="hljs-keyword">if</span> (s &lt; -<span class="hljs-number">1</span>) s = -<span class="hljs-number">1</span>;<br>        <span class="hljs-keyword">var</span> alpha = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">acos</span>(s);<br>        <span class="hljs-keyword">var</span> distance = alpha * earthR;<br>        <span class="hljs-keyword">return</span> distance;<br>    &#125;,<br>    <span class="hljs-comment">//判断是否在中国</span><br>    <span class="hljs-attr">outOfChina</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">lat, lon</span>) &#123;<br>        <span class="hljs-keyword">if</span> (lon &lt; <span class="hljs-number">72.004</span> || lon &gt; <span class="hljs-number">137.8347</span>)<br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>        <span class="hljs-keyword">if</span> (lat &lt; <span class="hljs-number">0.8293</span> || lat &gt; <span class="hljs-number">55.8271</span>)<br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br>        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>    &#125;,<br>    <span class="hljs-attr">transformLat</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">x, y</span>) &#123;<br>        <span class="hljs-keyword">var</span> ret = -<span class="hljs-number">100.0</span> + <span class="hljs-number">2.0</span> * x + <span class="hljs-number">3.0</span> * y + <span class="hljs-number">0.2</span> * y * y + <span class="hljs-number">0.1</span> * x * y + <span class="hljs-number">0.2</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sqrt</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(x));<br>        ret += (<span class="hljs-number">20.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(<span class="hljs-number">6.0</span> * x * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>) + <span class="hljs-number">20.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(<span class="hljs-number">2.0</span> * x * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br>        ret += (<span class="hljs-number">20.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(y * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>) + <span class="hljs-number">40.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(y / <span class="hljs-number">3.0</span> * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br>        ret += (<span class="hljs-number">160.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(y / <span class="hljs-number">12.0</span> * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>) + <span class="hljs-number">320</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(y * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span> / <span class="hljs-number">30.0</span>)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br>        <span class="hljs-keyword">return</span> ret;<br>    &#125;,<br>    <span class="hljs-attr">transformLon</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">x, y</span>) &#123;<br>        <span class="hljs-keyword">var</span> ret = <span class="hljs-number">300.0</span> + x + <span class="hljs-number">2.0</span> * y + <span class="hljs-number">0.1</span> * x * x + <span class="hljs-number">0.1</span> * x * y + <span class="hljs-number">0.1</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sqrt</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(x));<br>        ret += (<span class="hljs-number">20.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(<span class="hljs-number">6.0</span> * x * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>) + <span class="hljs-number">20.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(<span class="hljs-number">2.0</span> * x * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br>        ret += (<span class="hljs-number">20.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(x * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>) + <span class="hljs-number">40.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(x / <span class="hljs-number">3.0</span> * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br>        ret += (<span class="hljs-number">150.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(x / <span class="hljs-number">12.0</span> * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>) + <span class="hljs-number">300.0</span> * <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(x / <span class="hljs-number">30.0</span> * <span class="hljs-variable language_">this</span>.<span class="hljs-property">PI</span>)) * <span class="hljs-number">2.0</span> / <span class="hljs-number">3.0</span>;<br>        <span class="hljs-keyword">return</span> ret;<br>    &#125;<br>&#125;;<br></code></pre></td></tr></table></figure>


                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>开发记录</div>
      <div>https://deng-zixiong.gitee.io/dzx-blog/2021/10/01/开发记录/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>John Doe</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2021年10月1日</div>
        </div>
      
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/dzx-blog/2021/10/01/spring%20boot%20%E5%BC%80%E5%8F%91%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/" title="spring开发中遇到的问题">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">spring开发中遇到的问题</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/dzx-blog/2021/10/01/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91/" title="移动端开发">
                        <span class="hidden-mobile">移动端开发</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header">
    <i class="iconfont icon-list"></i>
    <span>目录</span>
  </p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
    </div>
  
  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/dzx-blog/js/events.js" ></script>
<script  src="/dzx-blog/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/dzx-blog/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/dzx-blog/js/local-search.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/dzx-blog/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
